<template>
  <el-card>
    <div ref="testbarchart" class="testbarchart" style="height: 400px" />
  </el-card>
</template>

<script>
import { echarts, elementResizeDetectorMaker } from './index'
import { getOptionToBar } from './options'
export default {
  name: 'BarChart',
  data() {
    return {
      myChart: null,
      option: {}
    }
  },
  mounted() {
    this.chartInit()
  },

  methods: {
    async chartInit() {
      this.myChart = echarts.init(this.$refs.testbarchart)

      const option3 = await getOptionToBar()
      this.myChart.setOption(option3)

      var erd = elementResizeDetectorMaker()
      erd.listenTo(this.$refs.testbarchart, (element) => {
        //   var width = element.offsetWidth
        //   var height = element.offsetHeight
        //   console.log('Size: ' + width + 'x' + height)
        this.myChart.resize()
      })
    }
  }
}
</script>
